<template>
  <el-row style="backgroundcolor: white; height: 600px">
    <el-row>
      <el-col :span="24">
        <h1 style="text-align: center">欢迎使用登录</h1>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="20" :push="2">
        <el-tabs :activeName="phone" type="card">
          <el-tab-pane label="手机登录" name="phone">
            <el-row>
              <el-col :span="16" :push="7">
                <el-form
                  ref="formPhone"
                  size="small"
                  style="width: 60%; margin-top: 100px"
                  :label-position="position"
                  class="demo-ruleForm"
                  :rules="rules"
                  :model="form"
                  label-width="80px"
                >
                  <el-form-item label="手机号码" prop="phone">
                    <i class="el-icon-phone"></i>
                    <el-input
                      v-model="form.phone"
                      type="text"
                      placeholder=""
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="验证码" prop="yzm">
                    <el-input v-model="form.yzm" type="text"></el-input
                  ></el-form-item>
                  <el-form-item label=""
                    ><el-button
                      type="primary"
                      style="margin-top: 15px"
                      @click="yzm"
                      >验证码发送</el-button
                    ></el-form-item
                  >
                  <el-form-item label="按钮">
                    <el-button type="submit">提交</el-button>
                  </el-form-item>
                </el-form>
                <el-radio-group v-model="position">
                  <el-radio label="right">右</el-radio>
                  <el-radio label="top">中</el-radio>
                  <el-radio label="left">左</el-radio>
                </el-radio-group>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="账号登录" name="zhang">
            <el-row>
              <el-col :span="16" :push="7">
                <el-form
                  ref="formUser"
                  size="small"
                  style="width: 60%; margin-top: 100px"
                  :label-position="position"
                  class="demo-ruleForm"
                  :rules="rules"
                  :model="form"
                  label-width="80px"
                >
                  <el-form-item label="账号" prop="name">
                    <i class="el-icon-user"></i>
                    <el-input
                      v-model="form.name"
                      type="text"
                      placeholder=""
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="密码" prop="pass">
                    <i class="el-icon-message"></i>
                    <el-input
                      v-model="form.pass"
                      type="password"
                      placeholder=""
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="按钮">
                    <el-button @click="userSubmit">提交</el-button>
                    <el-button type="reset" @click="reset('form')"
                      >重置</el-button
                    >
                  </el-form-item>
                </el-form>
                <el-radio-group v-model="position">
                  <el-radio label="right">右</el-radio>
                  <el-radio label="top">中</el-radio>
                  <el-radio label="left">左</el-radio>
                </el-radio-group>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </el-row>
</template>
<script>
import axios from "axios";
import qs from "qs";
export default {
  data() {
    return {
      phone: "phone",
      position: "left",
      options: [
        {
          value: "湖南",
          lable: "hunan",
        },
        {
          value: "武汉",
          lable: "wuhan",
        },
      ],
      form: {
        name: "",
        pass: "",
        sex: "",
        checkbox: [],
        model: "",
        date: "",
        time: new Date().toLocaleString(),
        text: "",
      },
      rules: {
        model: [
          {
            required: true,
            message: "你是哪里人",
          },
        ],
        name: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { min: 5, max: 15, message: "长度在3-5个范围", trigger: "blur" },
        ],
        pass: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 5, max: 15, message: "长度在3-5个范围", trigger: "blur" },
        ],
        sex: [
          {
            required: true,
            message: "请选择性别",
            trigger: "blur",
          },
        ],
        checkbox: [
          {
            required: true,
            message: "请选择爱好",
          },
        ],
        date: [
          {
            required: true,
            message: "日子过的很快",
          },
        ],
        time: [
          {
            required: true,
            message: "时间是很珍贵的",
          },
        ],
        text: [
          {
            required: true,
            message: "请留下你的脚印",
          },
        ],
      },
      msg: "hello",
      name: "",
      pass: "",
      user: "",
      pa: "",
    };
  },
  methods: {
    reset: function (formname) {
      this.$refs.formUser.resetFields()
    },
    userSubmit: function () {
      let judge = this.$refs.formUser.validate()
      let self = this
      console.log(judge)
      judge.then(res => {
        if(res) {
          let obj = {
            user: self.form.name,
            pass: self.form.pass
          }
          self.$http('post', '/deng', obj).then(x => {
            console.log(x)
            if (x.data.ok === 200) {
              self.$message.success('登陆成功')
              self.$router.push({
                name: 'view',
                params: {
                  name: obj.user
                }
              })
            } else {
              self.$message.error('登陆失败')
            }
          })
        }
      })
    },
    yzm: function () {
      const data = {
        phone: this.form.phone,
      };
      const header = {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      };
      axios
        .post("http://localhost:8000/dome.php", qs.stringify(data), header)
        .then((res) => {
          console.log(res.data);
        });
    },
  },
  mounted() {
    // console.log(window.location.hash);
    // console.log(window.history)
    console.log(this.$attrs);
    if (typeof this.$route.query.user !== 'undefined') {
      this.form.name = this.$route.query.user
    }
  },
  watch: {
    $route: {
      handler: function (newValue, oldValue) {
        console.log(newValue);
      },
      immediate: true,
    },
  },
};
</script>

